<template>
  <div class="pro">
    <el-table :data="prolistdata" style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <span style="margin-left: 10px">{{
              (currentPage - 1) * pageSize + scope.$index + 1
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-image
              :src="scope.row.img1"
              :preview-src-list="[scope.row.img1, scope.row.img2, scope.row.img3, scope.row.img4]"
              :alt="scope.row.alt"
              :z-index="100"
              preview-teleported
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="proname" align="center"> </el-table-column>
      <el-table-column label="品牌" prop="brand" align="center"> </el-table-column>
      <el-table-column
        label="分类"
        :filters="filtersArr"
        :filter-method="filtermethod"
        prop="category"
        align="center"
      >
      </el-table-column>
      <el-table-column label="原价" :sortable="true" prop="originprice" align="center">
      </el-table-column>
      <el-table-column label="折扣" sortable prop="discount" align="center"> </el-table-column>
      <el-table-column label="销量" sortable prop="sales" align="center"> </el-table-column>
      <el-table-column label="是否秒杀" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isseckill"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateproFn(scope.row.proid, 'isseckill', scope.row.isseckill)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否售卖" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.issale"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateproFn(scope.row.proid, 'issale', scope.row.issale)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="updateproFn(scope.row.proid, 'isrecommend', scope.row.isrecommend)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      v-model:current-page="currentPage"
      :default-page-size="1"
    />
  </div>
</template>

<script>
// 导入接口
import { getprolist, updateprostatus } from '@/utils/product'

export default {
  name: '',
  data() {
    return {
      prolistdata: [], // 当前页的产品列表
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页条数
      total: 0 // 总的数据条数
    }
  },
  computed: {
    filtersArr() {
      let arr = this.prolistdata.map((item) => {
        return item.category
      })

      // console.log('arr', arr)
      // console.log('arr1', Array.from(new Set(arr)))
      // console.log(
      //   Array.from(new Set(arr)).map((item) => {
      //     return { text: item, value: item }
      //   })
      // )
      return Array.from(new Set(arr)).map((item) => {
        return { text: item, value: item }
      })

      // return [
      //   { text: '手机', value: '手机' },
      //   { text: '家电', value: '家电' }
      // ]
    }
  },
  watch: {
    // currentPage(newvalue) {
    //   console.log('newvalue', newvalue)
    // }
    currentPage: {
      handler(newvalue) {
        console.log('newvalue', newvalue)
        // 根据页数的变化, 重新请求数据
        this.getprolistFn()
      }
    }
  },
  created() {
    // 初始化请求列表数据
    this.getprolistFn()
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row)
    },
    // 定义请求产品列表数据
    getprolistFn() {
      getprolist({
        count: this.currentPage,
        limitNum: this.pageSize
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.prolistdata = res.data.data
          this.total = res.data.total
        }
      })
    },
    // 数据过滤时使用的方法
    filtermethod(value, row, column) {
      // console.log(value, row, column)
      return row.category == value
    },
    // 更新产品的状态
    updateproFn(proid, type, status) {
      console.log(proid, type, status)
      // 调用产品更新接口
      updateprostatus({
        proid: proid, // 产品id
        type: type, // isseckill, isrecommend
        flag: status // boolean
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          // 重新获取数据列表
          this.getprolistFn()
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep .cell {
  height: 70px !important;
  overflow: hidden;
}
</style>